<template>
  <el-dialog
    v-model="dialogFormVisible"
    :close-on-click-modal="false"
    :title="title"
    width="60%"
    @close="close"
  >
    <el-form
      ref="formRef"
      :inline="true"
      label-width="120px"
      :model="form"
      :rules="rules"
      style="display: flex; flex-wrap: wrap; align-items: flex-start"
    >
      <el-form-item label="媒体：" prop="media">
        <el-input v-model="form.media" placeholder="请输入媒体" />
      </el-form-item>
      <el-form-item label="书城：" prop="book_app">
        <el-input v-model="form.book_app" placeholder="请输入书城" />
      </el-form-item>
      <el-form-item label="书籍名称：" prop="book_name">
        <el-input v-model="form.book_name" placeholder="请输入书籍名称" />
      </el-form-item>
      <el-form-item label="书籍类型：" prop="type">
        <el-input v-model="form.type" placeholder="请输入书籍类型" />
      </el-form-item>
      <el-form-item label="作者：" prop="author">
        <el-input v-model="form.author" placeholder="请输入作者" />
      </el-form-item>
      <el-form-item label="书籍字数：" prop="book_number">
        <el-input v-model="form.book_number" placeholder="请输入书籍字数" />
      </el-form-item>
      <el-form-item label="是否暧昧：" prop="is_ambiguous">
        <el-radio-group v-model="form.is_ambiguous" style="width: 192px">
          <el-radio :label="0">否</el-radio>
          <el-radio :label="1">是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否完结：" prop="is_end">
        <el-radio-group v-model="form.is_end" style="width: 192px">
          <el-radio :label="0">否</el-radio>
          <el-radio :label="1">是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="卡点章节：" prop="stuck_point_chapter">
        <el-input
          v-model="form.stuck_point_chapter"
          placeholder="请输入卡点章节"
        />
      </el-form-item>
      <el-form-item label="书币价格：" prop="book_money">
        <el-input v-model="form.book_money" placeholder="请输入书币价格" />
      </el-form-item>
      <el-form-item label="充值模板：" prop="recharge_template">
        <el-input
          v-model="form.recharge_template"
          placeholder="请输入充值模板"
          rows="4"
          style="width: 192px"
          type="textarea"
        />
      </el-form-item>
      <el-form-item label="链接：" prop="link">
        <el-input
          v-model="form.link"
          placeholder="请输入链接"
          rows="4"
          style="width: 192px"
          type="textarea"
        />
      </el-form-item>
      <el-form-item label="备注：" prop="remark">
        <el-input
          v-model="form.remark"
          placeholder="请输入备注"
          rows="4"
          style="width: 192px"
          type="textarea"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { doEdit } from '@/api/enterpriseWeChat/book'
  export default defineComponent({
    name: 'TableEdit',
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')
      const state = reactive({
        formRef: null,
        treeRef: null,
        form: {
          media: '',
          book_app: '',
          book_name: '',
          type: '',
          author: '',
          book_number: '',
          is_ambiguous: '',
          is_end: '',
          stuck_point_chapter: '',
          recharge_template: '',
          book_money: '',
          link: '',
          remark: '',
        },
        rules: {
          media: [{ required: true, trigger: 'blur', message: '请输入媒体' }],
          book_app: [
            { required: true, trigger: 'blur', message: '请输入书城' },
          ],
          book_name: [
            { required: true, trigger: 'blur', message: '请输入书籍名称' },
          ],
          type: [
            { required: true, trigger: 'blur', message: '请输入书籍类型' },
          ],
          author: [{ required: true, trigger: 'blur', message: '请输入作者' }],
          book_number: [
            { required: true, trigger: 'blur', message: '请输入书籍字数' },
          ],
          is_ambiguous: [
            { required: true, trigger: 'blur', message: '请选择' },
          ],
          is_end: [{ required: true, trigger: 'blur', message: '请选择' }],
          stuck_point_chapter: [
            { required: true, trigger: 'blur', message: '请输入卡点章节' },
          ],
          recharge_template: [
            { required: true, trigger: 'blur', message: '请输入充值模板' },
          ],
          book_money: [
            { required: true, trigger: 'blur', message: '请输入书币价格' },
          ],
          link: [{ required: true, trigger: 'blur', message: '请输入链接' }],
          remark: [{ required: true, trigger: 'blur', message: '请输入备注' }],
        },
        title: '',
        dialogFormVisible: false,
      })

      const showEdit = (row) => {
        console.log(row)
        if (!row) {
          state.title = '创建书籍记录'
        } else {
          state.title = '编辑书籍记录'
          state.form = Object.assign({}, row)
        }
        state.dialogFormVisible = true
      }
      const close = () => {
        state['formRef'].resetFields()
        state.form = {}
        state.dialogFormVisible = false
      }
      const save = () => {
        state['formRef'].validate(async (valid) => {
          if (valid) {
            const { message } = await doEdit(state.form)
            $baseMessage(message, 'success', 'vab-hey-message-success')
            emit('fetch-data')
            close()
          }
        })
      }
      return {
        ...toRefs(state),
        showEdit,
        close,
        save,
      }
    },
  })
</script>

<style lang="scss" scoped></style>
